<template>
<card class="task-con">
    <p slot="title">预约</p>
    <span slot="extra" @click.prevent="remove">
            <Icon type="close-round" color="#495060"></Icon>
    </span>

    <Form inline ref="formValidate" :model="formValidate" :rules="ruleValidate">
        <Row>
            <Col span="6">
                <FormItem label="预约时间" :label-width="80" prop="appointTime">
                    <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择时间" style="width: 200px" v-model="formValidate.appointTime" @on-change="selectDateTime" ></DatePicker>   
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="12" style="margin-left:80px;">
                <FormItem>
                    <Button type="primary" @click="saveAppoint">提交</Button>
                </FormItem>
            </Col>
        </Row>
    </Form>
</card>
</template>
<style scoped>
    .task-con {
        width: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -100px;
        z-index: 200;
        text-align: left;
        box-shadow: 0 0 10px 1px;
    }
    
    .ivu-card:hover {
        box-shadow: 0 0 10px 1px;
    }
</style>
<script>
    import {
        mapGetters
    } from 'vuex'
    import appointService from 'service/appointService.js'
    import {
        getCurrentTime
    } from '@/libs/filter.js'
    export default {
        name: 'telephoneBooking',
        props: {
            caseData: Object,
            remove: Function
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo'
            })
        },
        data() {
            const validateTime = (rule, value, callback) => {
                let dtime = (new Date()).getTime()
                let choseTime = (new Date(value)).getTime()
                if (!value) {
                    callback(new Error('请选择预约时间！'));
                } else if (choseTime < dtime) {
                    callback(new Error('不能小于当前时间'));
                } else {
                    callback()
                }
            }
            return {
                formValidate: {
                    appointTime: getCurrentTime()
                },
                ruleValidate: {
                    appointTime: [{
                        required: true,
                        validator: validateTime,
                        trigger: 'change'
                    }]
                }
            }
        },
        methods: {
            saveAppoint() {
                this.$refs['formValidate'].validate(async(valid) => {

                    if (valid) { //验证成功
                        let appointTime = (new Date(this.formValidate.appointTime)).getTime()
                        let data = {
                            "caseId": this.caseData.caseId,
                            "content": this.caseData.content,
                            "userId": this.loginUserInfo.userId,
                            "appointTime": appointTime,
                            "stuId": this.caseData.stuId,
                            'stuName': this.caseData.stuName,
                            "telNo": this.caseData.telNo

                        }
                        let jsondata = await appointService.createAppointment(data)

                        if (jsondata.state) {
                            this.remove()
                            this.$Message.success(jsondata.msg);

                            this.$store.dispatch('getAppointList', {
                                'userId': this.loginUserInfo.userId
                            })
                        } else {
                            this.$Message.warning(jsondata.msg);
                        }
                    }
                })
            },
            selectDateTime(value) {
                this.formValidate.appointTime = value
            }

        }
    }
</script>